<template>
  <div class="dashboard-container">
    <el-row style="margin-left: -10px; margin-right: -10px">
      <el-col :span="18" style="padding-left: 10px; padding-right: 10px">
        <el-row>
          <el-col :span="13" style="padding-left: 10px; padding-right: 10px">
            <div class="box home-user-task-stats bgc1">
              <div class="header">
                <div class="title">
                  工单统计<span
                    class="sub-title"
                  >{{ firstDayOfMonth }} ~ {{ today }}</span>
                </div>
              </div>
              <div class="body">
                <div class="stats">
                  <div class="item">
                    <div class="num color1 text-shadow1">
                      {{
                        collectReport.reduce((sum, item) => sum + item.total, 0)
                      }}
                    </div>
                    <div class="text color2">工单总数（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num color1 text-shadow1">
                      {{
                        collectReport.reduce(
                          (sum, item) => sum + item.completedTotal,
                          0
                        )
                      }}
                    </div>
                    <div class="text color2">完成工单（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num color1 text-shadow1">
                      {{
                        collectReport.reduce(
                          (sum, item) => sum + item.progressTotal,
                          0
                        )
                      }}
                    </div>
                    <div class="text color2">进行工单（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num color1 text-shadow1">
                      {{
                        collectReport.reduce(
                          (sum, item) =>
                            sum +
                            item.total -
                            item.completedTotal -
                            item.progressTotal,
                          0
                        )
                      }}
                    </div>
                    <div class="text color2">取消工单（个）</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="11" style="padding-left: 10px; padding-right: 10px">
            <div class="box home-user-task-stats bgc2">
              <div class="header">
                <div class="title">
                  销售统计<span
                    class="sub-title"
                  >{{ firstDayOfMonth }} ~ {{ today }}</span>
                </div>
              </div>
              <div class="body">
                <div class="stats">
                  <div class="item">
                    <div class="num color3 text-shadow2">{{ orderCount }}</div>
                    <div class="text color4">订单量（个）</div>
                  </div>
                </div>
                <div class="stats">
                  <div class="item">
                    <div class="num color3 text-shadow2">{{ orderAmount }}</div>
                    <div class="text color4">销售额（万元）</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="box sku-sale-collect">
          <div class="header">
            <div class="title">
              销售数据<span
                class="sub-title"
              >{{ startDate }} ~ {{ today }}</span>
            </div>
            <div class="week-month-year">
              <div
                class="item"
                :class="{ 'is-checked': dataType === 'week' }"
                @click="checkType('week')"
              >
                周
              </div>
              <div
                class="item"
                :class="{ 'is-checked': dataType === 'month' }"
                @click="checkType('month')"
              >
                月
              </div>
              <div
                class="item"
                :class="{ 'is-checked': dataType === 'year' }"
                @click="checkType('year')"
              >
                年
              </div>
            </div>
          </div>
          <div class="charts">
            <div class="chart">
              <div v-show="amountCollect.xAxis?.length !== 0" ref="amount" style="height: 100%; width: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" />
              <div v-show="amountCollect.xAxis?.length === 0" class="empty">
                <img
                  src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                >
                <div class="tips">暂无数据</div>
              </div>
            </div>
            <div class="chart">
              <div v-show="regionCollect.xAxis?.length !== 0" ref="region" style="height: 100%; width: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" />
              <div v-show="regionCollect.xAxis?.length === 0" class="empty">
                <img
                  src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                >
                <div class="tips">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
        <div class="box bgc3 sku-sale-rank">
          <div class="header">
            <div class="title">
              商品热榜<span
                class="sub-title"
              >{{ firstDayOfMonth }} ~ {{ today }}</span>
            </div>
          </div>
          <div class="body">
            <el-row v-for="(item, index) in skuTop" :key="index">
              <el-col :span="5">
                <div :class="['top', `top${index + 1}`]">{{ index + 1 }}</div>
              </el-col>
              <el-col :span="13">
                <div :title="item.skuName" class="sku-name">
                  {{ item.skuName }}
                </div>
              </el-col>
              <el-col :span="6">
                <div class="count">{{ item.count }}单</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-left: -10px; margin-right: -10px; margin-top: 20px">
      <el-col :span="14" style="padding-left: 10px; padding-right: 10px">
        <div class="box partner-node-collect">
          <div class="header">
            <div class="title">合作商点位数Top5</div>
            <svg
              version="1.1"
              viewBox="0 0 1024 1024"
              class="more svg-icon svg-fill"
              style="width: 16px; height: 16px"
              fill="#5f84ff"
            >
              <defs />
              <path
                pid="0"
                d="M512 947.2C271.36 947.2 76.8 752.64 76.8 512S271.36 76.8 512 76.8 947.2 271.36 947.2 512 752.64 947.2 512 947.2M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0m256 435.2c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m-512 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m256 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8"
              />
            </svg>
          </div>
          <el-row
            align="middle"
            type="flex"
            class="body"
            style="margin-left: -10px; margin-right: -10px"
          >
            <el-col :span="17" style="padding-left: 10px; padding-right: 10px">
              <div
                ref="node"
                class="chart"
                style="
                  height: 300px;
                  width: 100%;
                  -webkit-tap-highlight-color: transparent;
                  user-select: none;
                  position: relative;
                "
              />
            </el-col>
            <el-col :span="7" style="padding-left: 10px; padding-right: 10px">
              <div class="collect">
                <div class="count">{{ nodeCount }}</div>
                <div class="name">点位数</div>
                <div class="count count2">{{ partnerCount }}</div>
                <div class="name">合作商数</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="10" style="padding-left: 10px; padding-right: 10px">
        <div class="box abnormal-equipment">
          <div class="header">
            <div class="title">异常设备监控</div>
            <svg
              version="1.1"
              viewBox="0 0 1024 1024"
              class="more svg-icon svg-fill"
              style="width: 16px; height: 16px"
              fill="#5f84ff"
            >
              <defs />
              <path
                pid="0"
                d="M512 947.2C271.36 947.2 76.8 752.64 76.8 512S271.36 76.8 512 76.8 947.2 271.36 947.2 512 752.64 947.2 512 947.2M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0m256 435.2c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m-512 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m256 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8"
              />
            </svg>
          </div>
          <div class="empty">
            <img
              src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            >
            <div class="tips">暂无数据</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPartnerCount } from '@/api/user'
import { getCollectReport } from '@/api/task'
import { getNodeCollect, getNodeCount } from '@/api/vm'
import {
  getOrderCount,
  getOrderAmount,
  getAmountCollect,
  getRegionCollect,
  getSkuTop
} from '@/api/order'
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      collectReport: [],
      orderCount: '',
      orderAmount: '',
      dataType: 'week',
      amountCollect: {},
      regionCollect: {},
      amount: {},
      region: {},
      skuTop: [],
      node: {},
      nodeCollect: [],
      nodeCount: '',
      partnerCount: ''
    }
  },
  computed: {
    ...mapGetters(['name']),
    today() {
      // 获取当前日期字符串
      return new Date()
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfMonth() {
      const today = new Date()
      // 获取本月第一天字符串
      return new Date(today.getFullYear(), today.getMonth(), 1)
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfWeek() {
      const today = new Date()
      const dayOfWeek = today.getDay()
      const daysToMonday = (7 - dayOfWeek) % 7
      // 获取本周第一天字符串
      return new Date(today.setDate(today.getDate() + daysToMonday - 6))
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfYear() {
      const today = new Date()
      // 获取本年第一天字符串
      return new Date(today.getFullYear(), 0, 1)
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    startDate() {
      switch (this.dataType) {
        case 'week':
          return this.firstDayOfWeek
        case 'month':
          return this.firstDayOfMonth
        default:
          return this.firstDayOfYear
      }
    }
  },
  async created() {
    this.collectReport = await getCollectReport(
      this.firstDayOfMonth + ' 00:00:00',
      this.today + ' 23:59:59'
    )
    this.orderCount = await getOrderCount(
      this.firstDayOfMonth + ' 00:00:00',
      this.today + ' 23:59:59'
    )
    const amount = await getOrderAmount(
      this.firstDayOfMonth + ' 00:00:00',
      this.today + ' 23:59:59'
    )
    this.orderAmount = (amount / 1000000).toFixed(2)
    this.skuTop = await getSkuTop(10, this.firstDayOfMonth, this.today)
    this.nodeCount = await getNodeCount()
    this.partnerCount = await getPartnerCount()
  },
  async mounted() {
    this.amount = echarts.init(this.$refs.amount)
    this.region = echarts.init(this.$refs.region)
    this.node = echarts.init(this.$refs.node)
    this.initCharts()
  },
  methods: {
    checkType(type) {
      this.dataType = type
      this.initCharts()
    },
    async getAmountCollect() {
      switch (this.dataType) {
        case 'week':
          this.amountCollect = await getAmountCollect(
            1,
            this.firstDayOfWeek,
            this.today
          )
          this.regionCollect = await getRegionCollect(
            this.firstDayOfWeek,
            this.today
          )
          // eslint-disable-next-line no-case-declarations
          const weekdays = [
            '星期日',
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六'
          ]
          this.amountCollect.xAxis = this.amountCollect.xAxis.map(
            (item) => weekdays[new Date(item).getDay()]
          )
          break
        case 'month':
          this.amountCollect = await getAmountCollect(
            1,
            this.firstDayOfMonth,
            this.today
          )
          this.regionCollect = await getRegionCollect(
            this.firstDayOfMonth,
            this.today
          )
          this.amountCollect.xAxis = this.amountCollect.xAxis.map((item) => {
            const date = new Date(item)
            return `${date.getMonth() + 1}月${date.getDate()}日`
          })
          break
        default:
          this.amountCollect = await getAmountCollect(
            2,
            this.firstDayOfYear,
            this.today
          )
          this.regionCollect = await getRegionCollect(
            this.firstDayOfYear,
            this.today
          )
          this.amountCollect.xAxis = this.amountCollect.xAxis.map((item) => {
            const date = new Date(item)
            return `${date.getFullYear()}年${date.getMonth() + 1}月`
          })
          break
      }
    },
    async initCharts() {
      await this.getAmountCollect()
      this.nodeCollect = await getNodeCollect()
      this.amount.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '销售额：{c}<br>{b}'
        },
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontWeight: 'bold',
            fontSize: '14px'
          }
        },
        grid: {
          height: '190px',
          width: '520px'
        },
        color: '#ff5757',
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.amountCollect.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.amountCollect.series.map((item) => item / 100),
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 4
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#fec6c6' },
                  { offset: 1, color: 'rgba(255,0,0,0)' }
                ]),
                opacity: 0.5
              }
            }
          }
        ]
      })
      this.region.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '销售额：{c}<br>{b}'
        },
        color: '#9fc1ff',
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontWeight: 'bold',
            fontSize: '14px'
          }
        },
        grid: {
          height: '190px',
          width: '520px'
        },
        xAxis: {
          type: 'category',
          data: this.regionCollect.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.regionCollect.series.map((item) => item / 100),
            type: 'bar',
            itemStyle: {
              borderRadius: [5, 5, 0, 0] // 设置柱形上方两个角为圆角
            },
            barWidth: 20
          }
        ]
      })
      this.node.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br> 总占比：{d}%'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: true,
              formatter: '{b} \n {d}%',
              textStyle: {
                fontWeight: 'bold'
              }
            },
            data: this.nodeCollect
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  & {
    padding: 20px;
  }
  .box {
    padding: 20px;
    border-radius: 20px;
    position: relative;
    .header,
    .title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .title {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333;
      .sub-title {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .home-user-task-stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(20vh - 24px);
    min-height: 166px;
    background: #e9f3ff;
    border-radius: 20px;
  }

  .home-user-task-stats .body .stats,
  .home-user-task-stats .body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .home-user-task-stats .body .stats {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .home-user-task-stats .body .stats .item {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .home-user-task-stats .body .stats .item .num {
    height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
  }

  .home-user-task-stats .body .stats .item .text {
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
  }

  .home-user-task-stats .body .stats .item .color1 {
    color: #072074;
  }

  .home-user-task-stats .body .stats .item .color2 {
    color: #91a7dc;
  }

  .home-user-task-stats .body .stats .item .color3 {
    color: #ff5757;
  }

  .home-user-task-stats .body .stats .item .color4 {
    color: #de9690;
  }

  .home-user-task-stats .body .stats .item .text-shadow1 {
    text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
  }

  .home-user-task-stats .body .stats .item .text-shadow2 {
    text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
  }

  .bgc1 {
    background: #e9f3ff;
    background-image: url(),
      url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
  }

  .bgc2 {
    background: #fbefe8
      url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
      calc(100% - 12px) 100%;
  }

  .sku-sale-collect {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(40vh - 68px);
    min-height: 352px;
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
  }

  .sku-sale-collect .charts {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .week-month-year {
    width: 129px;
    height: 34px;
    background: rgba(233, 243, 255, 0.37);
    border-radius: 10px;
  }

  .week-month-year .item,
  .week-month-year {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .week-month-year .item {
    width: 37px;
    height: 25px;
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
  }

  .week-month-year .is-checked {
    background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
    border-radius: 7px;
    font-weight: 600;
    color: #333;
  }

  .chart {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 100%;
  }
  .sku-sale-rank {
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(60vh - 72px);
    min-height: 538px;
    background: #fff;
    border-radius: 20px;
  }

  .sku-sale-rank .body,
  .sku-sale-rank {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
  }

  .sku-sale-rank .body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 20px;
  }

  .sku-sale-rank .body .top {
    display: inline-block;
    width: 16px;
    height: 20px;
    margin-left: 10px;
    background: url();
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei, zihun143;
    font-weight: 400;
    color: #e9b499;
    line-height: 14px;
  }

  .sku-sale-rank .body .top1 {
    width: 21px;
    height: 20px;
    background: url();
    color: #8e5900;
  }

  .sku-sale-rank .body .top2 {
    width: 21px;
    height: 20px;
    background: url();
    color: #494949;
  }

  .sku-sale-rank .body .top3 {
    width: 21px;
    height: 20px;
    background: url();
    color: #cf6d3d;
  }

  .sku-sale-rank .body .sku-name {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .sku-sale-rank .body .count {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #737589;
    line-height: 20px;
    text-align: right;
  }
  .partner-node-collect {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(40vh - 48px);
    min-height: 353px;
    background: #fff;
    border-radius: 20px;
  }

  .partner-node-collect .body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .partner-node-collect .body .chart {
    padding-top: 16px;
  }

  .partner-node-collect .body .collect {
    width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
      linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
      linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
      linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }

  .partner-node-collect .body .collect .count {
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #072074;
    line-height: 33px;
  }

  .partner-node-collect .body .collect .count2 {
    margin-top: 20px;
  }

  .partner-node-collect .body .collect .name {
    height: 17px;
    margin-top: 6px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000412;
    line-height: 17px;
  }

  .partner-node-collect .more {
    color: #5f84ff;
    cursor: pointer;
  }
  .empty {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .empty .tips {
    margin-top: 25px;
    color: #20232a;
    font-size: 14px;
  }
  .abnormal-equipment {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(40vh - 48px);
    min-height: 353px;
    background: #fff;
    border-radius: 20px;
  }
}
</style>
